<template>
  <section class="settlement">
    <el-col :span="24" class="action-bar">
      <span class="task-form-text">店铺：</span>
      <el-select v-model="searchType" class="action-bar-input" placeholder="请选择">
        <el-option
          v-for="item in searchTypeOptions"
          :key="item.value"
          :label="item.value"
          :value="item.value">
        </el-option>
      </el-select>
			<el-button type="primary" size="medium">筛选</el-button>
      <el-button type="primary" size="medium" @click="editor">新增</el-button>
    </el-col>
    <!--列表-->
		<el-table :data="users" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
			<el-table-column prop="name" label="名称" width="120"/>
			<el-table-column prop="sex" label="类别" width="100"/>
			<el-table-column prop="age" label="收支时间" width="100"/>
			<el-table-column prop="birth" label="金额" width="120"/>
			<el-table-column prop="addr" label="经办人" width="180"/>
      <el-table-column prop="addr" label="用途说明" width="180"/>
			<el-table-column label="操作" width="250">
				<el-button type="danger" size="mini" >删除</el-button>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code"><el-pagination background layout="prev, pager, next" :total="50"></el-pagination></div>
    </el-col>

    <!-- 弹出的编辑窗口 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      center
      class="editor-dialog"
      >
      <el-form :label-position="'left'" label-width="110px" :model="member" >
        <el-form-item label="店铺">
          <el-select v-model="searchType" placeholder="请选择">
            <el-option
              v-for="item in searchTypeOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成交订单数量">
          <el-input v-model="member.name"></el-input>
        </el-form-item>
        <el-form-item label="营业额">
          <el-input v-model="member.level"></el-input>
        </el-form-item>
        
        <el-form-item label="应结算金额">
          <el-input v-model="member.deadline"></el-input>
        </el-form-item>
        <el-form-item label="剩余未结算金额">
          <el-input v-model="member.mustMoney"></el-input>
        </el-form-item>
        <el-form-item label="经办人">
          <el-input v-model="member.hasMoney"></el-input>
        </el-form-item>
        <el-form-item label="结算周期">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="period.startTime" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="period.endTime" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">提交</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
export default {
	data(){
		return {
			users:[
				{name:'周杰伦',sex:'男',age:'18',birth:'1990-05-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'ff',sex:'男',age:'18',birth:'1994-04-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'ggg',sex:'男',age:'18',birth:'1993-03-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'gggg',sex:'男',age:'18',birth:'1992-02-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'}
      ],
      dropColumnName:'选择筛选的状态',
      dialogVisible:false,//编辑状态的弹窗
      searchType:'',//筛选的状态
      searchTypeOptions:[
        {value:'全部'},
        {value:'1'},
        {value:'2'},
      ],
      member:{
        name:'',
        level:'',
        state:'',//缴费状态
        deadline:'',//缴费时间
        mustMoney:'',//应缴金额
        hasMoney:'',//已交金额
        payType:''
      },//弹窗的信息
      period:{//结算周期
        startTime:'',
        endTime:''
      }
		}
  },
  methods: {
    columnChange(e){
      //选中筛选类别
      this.dropColumnName=e
    },
    editor(){
      //对缴费用户进行编辑
      this.dialogVisible = true
    },
    handleClose(){
      //编辑弹窗关闭前的回调

    }
  },
}
</script>
<style lang='scss' scoped>
  .settlement{
    .task-form-text{
				color: #666666;
			}
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>
	
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .settlement .el-dialog__body{overflow: auto;}
</style>
